layui.define(["jquery", "layer"], function (exports) {
    "use strict";

    var $ = layui.$;
    var layer = layui.layer;

    var style_str =`.jmSheet {
    width: 100%;
    background-color: #f8f8f8 !important;
}

.jmSheet li {
    height: 55px;
    border-bottom: 1px solid #eee;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    box-sizing: border-box;
    background-color: #fff;
    gap: 10px;
    padding: 0 10px;
}

.jmSheet li>.text {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.jmSheet li:hover {
    cursor: pointer;
}

.jmSheet li:hover span {
    color: #16b777;
}

.jmSheet li .img {
    position: relative;
    width: 24px;
    height: 24px;
    overflow: hidden;
    border-radius: 5px;
}

.jmSheet li .img img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jmSheet li span {
    font-size: 14px;
    color: rgba(0, 0, 0, .8);
    font-weight: 600;
}

.jmSheet li .desc {
    font-weight: normal;
    color: #c2c2c2;
    font-size: 12px;
}

.jmSheet .close {
    height: 55px;
    margin-top: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}

.jmSheet>h3 {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    font-weight: normal;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    color: #00000080;
    box-sizing: border-box;
}`

    $('head').append(`<style>${style_str}</style>`) 

    var jmSheet = {
        open: function (obj) {

            if (typeof obj.shadeClose === 'undefined') {
                obj.shadeClose = true;
            }
            var align = "center"
            if (typeof obj.align !== "undefined" && obj.align != "") {
                switch (obj.align) {
                    case "left":
                        align = "flex-start";
                        break;
                    case "right":
                        align = "flex-end";
                        break;
                    default:
                        align = "center";
                }
            }

            var html = "";
            $.each(obj.content, function (k, v) {
                var img = "";
                if (typeof v.img !== 'undefined' && v.img != "") {
                    img = `<div class="img"><img src="${v.img}"></div>`;
                }
                html += `<li style="justify-content:${align};">
                    ${img}
                    <div class="text">
                        <span>${v.text}</span>
                        <span class="desc">${v.desc || ''}</span>
                    </div>
                </li>`
            })

            var btnClose = "";
            var btnCloseSize = 0;
            if (typeof obj.shadeClose !== 'undefined' && !obj.shadeClose) {
                btnClose = `<a href="javascript:;" class="close">取消</a>`;
                btnCloseSize = (55 + 8);
            }
            var title = "";
            var titleSize = 0;
            if (typeof obj.title !== 'undefined' && obj.title != "") {
                title = `<h3>${obj.title}</h3>`;
                titleSize = 40;
            }

            //弹出
            var open = layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                offset: 'b',
                anim: 'slideUp', // 从下往上
                area: ['100%', titleSize + btnCloseSize + 55 * obj.content.length + 'px'],
                shade: 0.1,
                shadeClose: obj.shadeClose, // 是否点击遮罩关闭
                id: obj.id || '',
                content:
                    `<div class="jmSheet ${obj.addClass || ''}">
                    ${title}
                    <ul>${html}</ul>
                    ${btnClose}
                </div>`
            });

            //关闭
            $(`#layui-layer${open} .jmSheet .close`).on("click", function () {
                layer.close(open);
            })

            //点击列表
            $(`#layui-layer${open} .jmSheet`).on("click", "li", function () {
                obj.callback($(this).index(), this, obj.content[$(this).index()]);
            })
        }
    }


    exports('jmSheet', jmSheet); // 输出模块
});  